---
image: /generated/articles-docs-studio-studio.png
title: Starting the Studio
crumb: 'Timeline basics'
---

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

Using the Remotion Studio, you can preview your video, and if a server is connected, even render the video.

## Prerequisites

The Remotion CLI is required for this guide.  
Most templates have it out of the box, but you can install it by running the following command in your terminal:

<Tabs
defaultValue="npm"
values={[
{ label: 'npm', value: 'npm', },
{ label: 'pnpm', value: 'pnpm', },
{ label: 'yarn', value: 'yarn', },
{ label: 'bun', value: 'bun', },
]
}>
<TabItem value="npm">

```bash
npm i @remotion/cli
```

  </TabItem>

  <TabItem value="pnpm">

```bash
pnpm i @remotion/cli
```

  </TabItem>

  <TabItem value="yarn">

```bash
yarn add @remotion/cli
```

  </TabItem>

  <TabItem value="bun">

```bash
bun i @remotion/cli
```

  </TabItem>
</Tabs>

## Launching the Studio

You can start the Remotion Studio by running the following command in your terminal:

<Tabs
defaultValue="Regular templates"
values={[
{ label: 'Regular templates', value: 'Regular templates', },
{ label: 'Next.js and React Router 7 templates', value: 'Next.js and React Router templates', },
]
}>
<TabItem value="Regular templates">

```bash
npm start
```

  </TabItem>

  <TabItem value="Next.js and React Router templates">

```bash
npm run remotion
```

  </TabItem>
</Tabs>

This is a shorthand for the [`studio`](/docs/cli/studio) command of the [Remotion CLI](/docs/cli):

```bash
npx remotion studio
```

See the available [options here](/docs/cli/studio).

A server will be started on port `3000` (or a higher port if it isn't available) and the Remotion Studio should open in the browser.

<img src="/img/timeline.png"></img>
